import { FC, useMemo } from 'react';
import { Input } from 'antd';
import { observer } from 'mobx-react';

import RbProTable, { RbProTableStore } from '@components/RbProTable';
import { Content } from '@components/Page';

import { COMMON_REQUIRE_RULE } from '@utils/config';
import { TableAlignType } from '@/enumTypes/table';

const store = new RbProTableStore();

const ProcessCategory: FC = () => {
  /** 查询条配置列表 */
  const queryFromItems = useMemo(
    () => [
      {
        name: 'code',
        label: '分类编码',
        children: <Input />
      },
      {
        name: 'name',
        label: '分类名称',
        children: <Input />
      }
    ],
    []
  );

  /** 表格列配置 */
  const columns = useMemo(
    () => [
      {
        title: '流程分类编码',
        dataIndex: 'code',
        align: TableAlignType.center,
        width: 140
      },
      {
        title: '流程分类名称',
        dataIndex: 'name',
        align: TableAlignType.center,
        width: 140
      },
      {
        title: '备注',
        dataIndex: 'remark',
        ellipsis: true,
        width: 280
      },
      {
        title: '创建人',
        dataIndex: 'createBy',
        align: TableAlignType.center,
        sorter: true,
        width: 140
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        align: TableAlignType.center,
        sorter: true,
        width: 180
      },
      {
        title: '修改人',
        dataIndex: 'updateBy',
        align: TableAlignType.center,
        sorter: true,
        width: 140
      },
      {
        title: '修改时间',
        dataIndex: 'updateTime',
        align: TableAlignType.center,
        sorter: true,
        width: 180
      }
    ],
    []
  );

  /** 新增表单配置 */
  const addFormItems = useMemo(
    () => [
      {
        name: 'code',
        label: '流程分类编码',
        rules: [COMMON_REQUIRE_RULE],
        children: <Input />
      },
      {
        name: 'name',
        label: '流程分类名称',
        children: <Input />
      },
      {
        name: 'remark',
        label: '备注',
        children: <Input.TextArea />
      }
    ],
    []
  );

  /** 编辑表单配置 */
  const updateFormItems = useMemo(
    () => [
      {
        name: 'code',
        label: '流程分类编码',
        rules: [COMMON_REQUIRE_RULE],
        children: <Input />
      },
      {
        name: 'name',
        label: '流程分类名称',
        children: <Input />
      },
      {
        name: 'remark',
        label: '备注',
        children: <Input.TextArea />
      }
    ],
    []
  );

  return (
    <Content>
      <RbProTable
        rowKey="id"
        columns={columns}
        store={store}
        actionUrl="/flowable/proccate"
        sticky
        selectionType
        queryConfig={{
          queryFromItems,
          queryFormat: true
        }}
        addConfig={{
          addFormItems
        }}
        updateConfig={{ updateFormItems }}
        toolBarRender={() => ['add', 'update', 'delete']}
      />
    </Content>
  );
};

export default observer(ProcessCategory);
